import React from 'react'
import { useSelector } from 'react-redux'
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Modal, Space } from 'antd';
import { useNavigate } from 'react-router-dom'
const { confirm } = Modal;
function Home() {
    const nav = useNavigate()
    const user = useSelector(state => state.setUser)
    console.log(user);
    const showConfirm = () => {
        confirm({
            title: '是否确认退出?',
            icon: <ExclamationCircleFilled />,
            onOk() {
                console.log('OK');
                nav('/login')
                localStorage.removeItem('token')
                localStorage.removeItem('username')
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };
    
    return (
        <div>
            <div style={
                {
                    display: 'flex',
                    position: 'fixed',
                    top: 0, right: 0,
                    alignItems: 'center'
                }
            }
                onClick={() => { showConfirm() }}
            >
                <p>{user.name}</p>
                <img style={{ width: 50 }} src={user.pic} alt="" />
            </div>


        </div>
    )
}

export default Home
